<template>
    <div class="mb-6">
        <div class="flex flex-wrap justify-between mb-2 text-70">
            <div>作者：

                <template v-if="chapter.user">
                    <a :href="'/users/'+chapter.user.id">{{chapter.user.name}}</a>
                </template>
                <template v-else>
                    匿名
                </template>
            </div>
            <div>{{chapter.created_at}}</div>
            <div v-if="chapter.pivot">序号：{{ chapter.pivot.sequence}}</div>
            <div>编号:{{chapter.id}}</div>
        </div>
        <card class="relative">
            <card class="absolute hidden xl:block action">
                <div>
                    <slot/>
                </div>
                <div class="flex flex-wrap">
                    <tig-like class="block btn btn-white p-2 intro-like" :action="'/chapters/'+chapter.id+'/like'"
                              :is-liked="chapter.liked"
                              :likes-count="likes_count"/>
                    <tig-dislike class="block btn btn-white p-2" :action="'/chapters/'+chapter.id+'/dislike'"
                                 :is-disliked="chapter.disliked"
                                 :likes-count="dislikes_count"/>
                </div>

                <button class="block btn btn-white p-2" @click="toggleDisplayComments">{{displayCommentsText}}</button>
                <button class="block btn btn-white p-2 intro-comment" @click="toggle">我要评论</button>
            </card>
            <card-block>
                <heading v-if="chapter.title">{{chapter.title}}</heading>
            </card-block>

            <card-block class="markdown" v-html="chapter.content_html" v-if="showChapter"></card-block>
            <template v-else>
                <card-block v-if="isAdult && !showIfAdult">该章节可能包含成人内容，请确认
                    <button class="btn btn-default btn-outline" @click="showIfAdult=true"
                            title="是不是看到这个十八禁就直接点，不看别的章节了？">我已满十八岁
                    </button>
                </card-block>
                <card-block v-if="isNegative && !showIfNegative">该章节差评较多，请确认
                    <button class="btn btn-default btn-outline" @click="showIfNegative=true">我要浏览该章节内容</button>
                </card-block>
            </template>

            <card-block class="flex flex-wrap  justify-end xl:hidden border-t border-50">
                <slot/>
                <tig-like class="block btn btn-white p-2 intro-like" :action="'/chapters/'+chapter.id+'/like'"
                          :is-liked="chapter.liked" :likes-count="likes_count"/>
                <tig-dislike class="block btn btn-white p-2" :action="'/chapters/'+chapter.id+'/dislike'"
                             :is-disliked="chapter.disliked" :likes-count="dislikes_count"/>
                <button class="block btn btn-white p-2" @click="toggleDisplayComments">{{displayCommentsText}}</button>
                <button class="block btn btn-white p-2 intro-comment" @click="toggle">我要评论</button>
            </card-block>


            <tig-repository-chapter-comments v-if="chapter.comments && displayComments" :comments="chapter.comments"
                                             :chapter-user-id="chapter.user_id" :current-user-id="currentUserId"/>


            <tig-comment-form v-show="isOpen" :chapter-id="chapter.id"/>


        </card>
        <slot name="bottom"></slot>
    </div>

</template>

<script>
    import TigRepositoryChapterComments from './TigRepositoryChapterComments'
    import TigCommentForm from './TigCommentForm'

    export default {
        name: "TigChapterItem",
        data: function () {
            return {isOpen: false, displayComments: true, showIfNegative: false, showIfAdult: false}
        },

        methods: {
            toggleDisplayComments: function () {
                this.displayComments = !this.displayComments
            },
            toggle: function () {
                this.isOpen = !this.isOpen
            }
        }, computed: {
            likes_count: function () {
                return this.chapter.likes_counter ? this.chapter.likes_counter.count : 0;
            },
            dislikes_count: function () {
                return this.chapter.dislikes_counter ? this.chapter.dislikes_counter.count : 0;
            },
            isNegative: function () {

                return (this.dislikes_count >= 5 && this.likes_count <= 1) //差评
                    || (this.likes_count / (this.likes_count + this.dislikes_count) <= 0.4 &&
                        (this.dislikes_count + this.likes_count >= 6));//特别差评

            },
            isAdult: function () {
                return this.chapter.status == 1;
            },
            showChapter: function () {
                console.log(this.chapter, this.isNegative, this.showIfNegative, this.isAdult, this.showIfAdult);
                return (!this.isNegative || this.showIfNegative) && (!this.isAdult || this.showIfAdult);
            },
            displayCommentsText: function () {
                return this.displayComments ? '隐藏评论' : '显示评论';

            }
        },
        props: {
            chapter: {type: Object, required: true},
            currentUserId: Number//for comment delete
            // repository_id: {type: Number, required: true}
        },
        components: {
            TigRepositoryChapterComments, TigCommentForm
        }
    }
</script>

<style scoped>
    .action {
        right: -150px;
        width: 140px;
        box-sizing: border-box;
        transition: all 0.1s;
    }

    .action:hover {

        z-index: 999;

        /*transform: scale(1.02);*/
        @apply shadow-lg
        border border-primary-50%;
    }

</style>